<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userInfo/userInfo' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item>数据总览</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="topCOntent">
      <div class="topItem">
        <div class="topItem_top">
          <span>人数</span>
          <img src="@/assets/img/price.png" alt="" />
        </div>
        <div class="topItem_bottom">{{ userInfoData.userNum }}</div>
      </div>
      <div class="topItem">
        <div class="topItem_top">
          <span>单聊用户成分</span>
          <img src="@/assets/img/price.png" alt="" />
        </div>
        <div class="topItem_bottom">{{ userInfoData.oneUserDivide }}</div>
      </div>
      <div class="topItem">
        <div class="topItem_top">
          <span>单聊公会成分</span>
          <img src="@/assets/img/price.png" alt="" />
        </div>
        <div class="topItem_bottom">{{ userInfoData.oneUnionDivide }}</div>
      </div>
      <div class="topItem">
        <div class="topItem_top">
          <span>语音厅用户成分</span>
          <img src="@/assets/img/price.png" alt="" />
        </div>
        <div class="topItem_bottom">{{ userInfoData.audioUserDivide }}</div>
      </div>
      <div class="topItem">
        <div class="topItem_top">
          <span>语音厅公会成分</span>
          <img src="@/assets/img/price.png" alt="" />
        </div>
        <div class="topItem_bottom">{{ userInfoData.audioUnionDivide }}</div>
      </div>
    </div>
    <div class="centerBox">
      <div class="centerBox_top">
        <div>公会基本信息</div>
        <img src="@/assets/img/home/edit.png" alt="" @click="editUserInfo" />
      </div>
      <div class="guildName">
        <div class="guildNameT">公会名称</div>
        <div class="guildNameOn">{{ userInfoData.name }}</div>
      </div>
      <div class="guildLogo">
        <div class="guildNameT border">工会logo</div>
        <div class="guildLogoimg">
          <img :src="userInfoData.icon" alt="" />
          <!-- <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2118524b-e88f-4a47-9c7d-db74697ee00d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700758948&t=d93ddc078fe08709fc8a708332e5cd38"
            alt=""
          /> -->
        </div>
      </div>
      <div class="guildLogo">
        <div class="guildNameT border">公会简介</div>
        <div class="guildLogoimg jianjie">{{ userInfoData.description }}</div>
      </div>
    </div>

    <el-dialog title="修改工会信息" :visible.sync="editInfo" width="30%" @click="closeDialog('editForm')">
      <div>
        <div class="userSty">
          <span>公会名称:</span><el-input class="margin-top:10px;" placeholder="请输入内容" v-model="userName" clearable>
          </el-input>
        </div>
        <div class="userSty">
          <span>公会LOGO:</span><el-upload class="avatar-uploader" :action="$api + '/file/upload'" :headers="token"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-else class="avatar">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </div>
        <div class="userSty">
          <span>公会介绍:</span><el-input class="margin-top:10px;" placeholder="请输入内容" v-model="userCon" clearable>
          </el-input>
        </div>
        <div class="submit">
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userInfo, edituserInfo } from "@/api/user";
import Bus from "@/api/bus.js";
import Bus from '@/api/bus.js'
export default {
  data() {
    return {
      token: "",
      imageUrl: "",
      userCon: "",
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      listData: [], //用户数据
      userInfoData: "",
      editInfo: false,
      userName: "",
    };
  },
  // 注册组件
  components: {},
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    let a = localStorage.getItem("Authorization");
    this.token = { Authorization: a };
    this.$axios.defaults.headers.Authorization =
      localStorage.getItem("Authorization");

    this.getUserData();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    submit() {
      let data = {
        name: this.userName,
        icon: this.imageUrl,
        description: this.userCon,
        unionId: this.userInfoData.unionId,
      };
      edituserInfo(data).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.$message.success("修改成功");
          this.getUserData();
          this.editInfo = false;
          Bus.$emit('change')
        }
      });
      
    },
    handleAvatarSuccess(res, file) {
      // console.log(res, file, "tupian");
      // console.log(this.imageUrl, "图片信息");
      if (res.code == 200) {
        this.imageUrl = res.data;
      }
    },
    beforeAvatarUpload(file) {
      // console.log(file, "wenjian ");
      let a = URL.createObjectURL(file);
      // console.log(a, "sjd");
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    editUserInfo() {
      this.userName = this.userInfoData.name;
      this.imageUrl = this.userInfoData.icon;
      this.userCon = this.userInfoData.description;
      this.editInfo = true;
    },
    // 获取用户数据
    getUserData() {
      userInfo().then((res) => {
        console.log(res, "用户信息");
        if (res.code == 200) {
          this.userInfoData = res.data;
        } else {
          this.$message.info(res.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}

.topCOntent {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.topItem {
  width: 19%;
  height: 150px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e4e4e4;
  /*  box-sizing: border-box;
  padding-top: 17px;
  padding-left: 21px; */
}

.topItem_top {
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
  border-bottom: 1px solid #e4e4e4;
  box-sizing: border-box;
  padding-top: 17px;
  padding-left: 21px;
  padding-bottom: 17px;
  padding-right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topItem_top img {
  width: 16px;
  height: 16px;
}

.topItem_bottom {
  font-size: 34px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #202020;
  padding-top: 17px;
  padding-left: 21px;
}

.centerBox {
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  margin-top: 20px;
  padding: 20px 31px;
  box-sizing: border-box;
}

.centerBox_top {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #202020;
  border-bottom: 1px solid #979797;
  padding-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.centerBox_top img {
  width: 24px;
  height: 24px;
}

.guildNameT {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-top: 20px;
  margin-bottom: 12px;
}

.guildNameOn {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
  line-height: 22px;
  width: 367px;
  height: 50px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #979797;
  padding: 13px 16px;
  box-sizing: border-box;
}

.guildNameT {
  padding-bottom: 12px;
}

.border {
  border-bottom: 1px solid #979797;
}

.guildLogoimg {
  width: 103px;
  height: 103px;
}

.guildLogoimg img {
  width: 100%;
  height: 100%;
}

.jianjie {
  width: 100%;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
}

.userSty {
  margin-top: 20px;
}

.submit {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px solid #d9d9d9 !important;
}
</style>

 
 